<template>
    <div>
        <!-- 登录 -->
        <Logintop />
        <div class="flexaround content">
            <ul>
                <li class="titletext">快速签合同 就上大鸿签</li>
                <li class="margin-top4 notetext">在线签署 安全高效</li>
                <li class="notetext">助力中小企业异地签约用印</li>
                <img src="@/assets/img/login/loginleftimg.png" alt="" class="loginleftimg">
            </ul>
            <!-- 登录注册 -->
            <div class="rightcontent radius mainpadding2">
                <div v-show="showpage == 1">
                    <el-tabs :stretch="true" v-model="activeName">
                        <!-- <el-tab-pane label="扫码登录" name="first">
                            <ul class="flexcolumn">
                                <li id="qrCode" ref="qrCodeDiv" class="margin-top2"></li>
                                <li class="margin-top2 flexleft">
                                    <span>请使用微信扫描二维码登录</span>
                                    <i class="el-icon-refresh" style="color: #409eff;font-size: 18px;"></i>
                                    <span class="lan pointer" @click="bindQRCode">刷新</span>
                                </li>
                                <li class="margin-top4 xyzc">
                                    <el-checkbox v-model="checked"></el-checkbox>
                                    <span class="margin-left1">我已阅读并同意</span>
                                    <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                                    <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                                </li>
                                <li class="margin-top4 xyzc">
                                    <span class="margin-left1">没有账号？</span>
                                    <span class="lan pointer" @click="showpage = 2">立即注册</span>
                                </li>
                            </ul>
                        </el-tab-pane> -->
                        <el-tab-pane label="验证码登录" name="second" @keydown.native.enter="codeLoginFn('ruleFormCode')">
                            <div class="margin-top4">
                                <el-form :model="ruleFormCode" :rules="rules" label-position="top" ref="ruleFormCode"
                                    label-width="200px" class="demo-ruleForm">
                                    <el-form-item prop="userPhone">
                                        <el-input v-model="ruleFormCode.userPhone" placeholder="请输入手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="code">
                                        <el-input v-model="ruleFormCode.code" placeholder="请输入验证码">
                                            <div slot="append" class="getcode lan pointer"
                                                @click="getCode('ruleFormCode')">{{ codetext }}</div>
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                                <div class="margin-top4 xyzc">
                                    <el-checkbox v-model="checked"></el-checkbox>
                                    <span class="margin-left1">我已阅读并同意</span>
                                    <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                                    <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                                </div>
                            </div>
                            <div class="submitbtn margin-top4 " @click="codeLoginFn('ruleFormCode')">登录注册</div>
                            <ul class="flexbetween margin-top3">
                                <ul class="flexleft">
                                    <li class="lan margin-right1 pointer" @click="showpage = 2">新用户注册</li>
                                    <li class="margin-right1 placeholderline"></li>
                                    <!-- <li class="lan pointer" @click="retrieve('/retrieveAccount')">找回账号</li> -->
                                </ul>

                                <li class="lan pointer" @click="retrieve('/retrievePassword')">找回密码</li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="密码登录" name="third" @keydown.native.enter="loginFn('ruleFormPassword')">
                            <div class="margin-top4">
                                <el-form :model="ruleFormPassword" :rules="rules" label-position="top"
                                    ref="ruleFormPassword" label-width="200px" class="demo-ruleForm">
                                    <el-form-item prop="userPhoneEmil">
                                        <el-input v-model="ruleFormPassword.userPhoneEmil" placeholder="请输入手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="userPass">
                                        <el-input v-model="ruleFormPassword.userPass" type="password" placeholder="请输入密码">
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                                <div class="margin-top4 xyzc">
                                    <el-checkbox v-model="checked"></el-checkbox>
                                    <span class="margin-left1">我已阅读并同意</span>
                                    <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                                    <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                                </div>
                            </div>
                            <div class="submitbtn margin-top4" @click="loginFn('ruleFormPassword')">登录</div>
                            <ul class="flexbetween margin-top3">
                                <ul class="flexleft">
                                    <li class="lan margin-right1 pointer" @click="showpage = 2">新用户注册</li>
                                    <li class="margin-right1 placeholderline"></li>
                                    <!-- <li class="lan pointer" @click="retrieve('/retrieveAccount')">找回账号</li> -->
                                </ul>

                                <li class="lan pointer" @click="retrieve('/retrievePassword')">找回密码</li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div v-show="showpage == 2">
                    <div class="flexbetween">
                        <div class="titletext">欢迎注册大鸿签</div>
                        <li class="xyzc flexright">
                            <span class="margin-left1">已有账号？</span>
                            <span class="lan pointer" @click="showpage = 1">立即登录</span>
                        </li>
                    </div>
                    <div class="margin-top4">
                        <el-form :model="ruleFormRegister" label-position="top" ref="ruleFormRegister"
                            label-width="200px" class="demo-ruleForm">
                            <el-form-item prop="userPhone">
                                <el-input v-model="ruleFormRegister.userPhone" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input v-model="ruleFormRegister.code" placeholder="请输入验证码">
                                    <div slot="append" class="getcode lan pointer" @click="getCode('ruleFormCode')">
                                        {{ codetextR }}</div>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="userPass">
                                <el-input v-model="ruleFormRegister.userPass" type="password"
                                    placeholder="请设置登录密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="userPassReplace">
                                <el-input v-model="ruleFormRegister.userPassReplace" type="password"
                                    placeholder="再次确认登录密码"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="margin-top4 xyzc">
                        <el-checkbox v-model="checked"></el-checkbox>
                        <span class="margin-left1">我已阅读并同意</span>
                        <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                        <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                    </div>
                    <div class="submitbtn margin-top4 " @click="registerFn('ruleFormRegister')">同意协议并注册</div>
                </div>
            </div>
        </div>
        <problemInfo />
        <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div v-html="content" class="scroll fwbxontent"></div>
        </el-dialog>
        <Loginbottom />
    </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { Message } from 'element-ui'
import Logintop from "./component/logintop.vue";
import Loginbottom from "./component/loginbottom.vue";
import problemInfo from "./component/problemInfo.vue";
import Cookies from "js-cookie";

import { getSmsCode, register, getPrivacyAgreement, getRegistrationProtocol } from '@/api/index'

export default {
    name: 'login',
    components: {
        Logintop,
        Loginbottom,
        problemInfo
    },
    data() {
        return {
            showpage: 1,//1登录，2注册
            flag: true,
            flagR: true,
            activeName: "second",
            codetext: "获取验证码",
            codetextR: "获取验证码",
            checked: false,
            // 账号密码登录
            ruleFormPassword: {
                userPhoneEmil: '',
                userPass: '',
            },
            // 验证码登录
            ruleFormCode: {
                userPhone: '',
                code: '',
            },
            // 注册
            ruleFormRegister: {
                userPhone: '',
                code: '',
                userPass: '',
                userPassReplace: '',
            },

            rules: {
                userPhoneEmil: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                ],
                userPass: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                userPassReplace: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' }
                ],
                userPhone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ],
            },
            dialogVisible: false,//对话框
            dialogtitle: "大鸿签服务协议",//对话框框标题
            content: "",
        }
    },
    mounted: function () {
        this.$nextTick(function () {
            this.bindQRCode();
        })
    },
    watch: {
        activeName() {
            // 账号密码登录
            this.ruleFormPassword = {
                userPhoneEmil: '',
                userPass: '',
            }
            // 验证码登录
            this.ruleFormCode = {
                userPhone: '',
                code: '',
            }
            // 注册
            this.ruleFormRegister = {
                userPhone: '',
                code: '',
                userPass: '',
                userPassReplace: '',
            }
        },
        showpage(){
            // 账号密码登录
            this.ruleFormPassword = {
                userPhoneEmil: '',
                userPass: '',
            }
            // 验证码登录
            this.ruleFormCode = {
                userPhone: '',
                code: '',
            }
            // 注册
            this.ruleFormRegister = {
                userPhone: '',
                code: '',
                userPass: '',
                userPassReplace: '',
            }
        },

    },
    methods: {

        getCode(formName) {
            let userPhone;
            if (formName == 'ruleFormCode') {
                userPhone = this.ruleFormCode.userPhone
                if (userPhone == '') {
                    Message({
                        message: '手机号不能为空',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }

                let _this = this
                if (!_this.flag) return
                _this.flag = false
                getSmsCode({ userPhone }).then(res => {
                    var i = 60;
                    var timer = setInterval(function () {
                        _this.codetext = i + "秒";
                        if (i < 1) {
                            clearInterval(timer);
                            _this.flag = true
                            _this.codetext = "获取验证码";
                        } else {
                            i--;
                        }
                    }, 1000)
                    //     // console.log(res);
                })

            } else if (formName == 'ruleFormRegister') {
                userPhone = this.ruleFormRegister.userPhone
                if (userPhone == '') {
                    Message({
                        message: '手机号不能为空',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }

                let _this = this
                if (!_this.flagR) return
                _this.flagR = false
                getSmsCode({ userPhone }).then(res => {
                    var iR = 60;
                    var timerR = setInterval(function () {
                        _this.codetextR = iR + "秒";
                        if (iR < 1) {
                            clearInterval(timerR);
                            _this.flagR = true
                            _this.codetextR = "获取验证码";
                        } else {
                            iR--;
                        }
                    }, 1000)
                    // console.log(res);
                })
            }
        },
        // -验证码登录
        codeLoginFn(formName) {
            let { userPhone, code } = this.ruleFormCode
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.checked) {
                        Message({
                            message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                            type: 'warning',
                            duration: 2000
                        })
                        return false
                    }
                    // alert('submit!');
                    this.$store.dispatch("user/login", {
                        userName: userPhone,
                        loginType: "2",
                        code,
                    }).then(res => {
                        this.$router.push({ path: "/" }, () => { })
                        // location.reload()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // -账号密码登录
        loginFn(formName) {
            let { userPhoneEmil, userPass } = this.ruleFormPassword
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.checked) {
                        Message({
                            message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                            type: 'warning',
                            duration: 2000
                        })
                        return false
                    }
                    // alert('submit!');
                    this.$store.dispatch("user/login", {
                        userName: userPhoneEmil,
                        loginType: "3",
                        userPass,
                    }).then(res => {
                        this.$router.push({ path: "/" }, () => { })
                        // location.reload()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 注册
        registerFn(formName) {
            let { code, userPass, userPhone } = this.ruleFormRegister
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.checked) {
                        Message({
                            message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                            type: 'warning',
                            duration: 2000
                        })
                        return false
                    }
                    // alert('submit!');
                    register({
                        code,
                        userName: userPhone,
                        userPass
                    }).then(res => {
                        console.log(res);
                        if(res.code==200){
                            this.$message("注册成功！");
                            this.showpage = 1
                            this.activeName = 'third'
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        showdialog(value) {
            this.dialogVisible = true
            if (value == 1) {
                this.dialogtitle = "大鸿签服务协议"
                getRegistrationProtocol().then(res => {
                    this.content = res.result.data.agreement
                })
            } else {
                this.dialogtitle = "大鸿签隐私政策"
                getPrivacyAgreement().then(res => {
                    this.content = res.result.data.agreement
                })
            }
        },
        dialogVisibleFn() {
            this.dialogVisible = false
            this.checked = true
        },
        handleClose(done) {
            done();
        },
        bindQRCode: function () {
            this.$refs.qrCodeDiv.innerHTML = ""//词句代码将之前的二维码清空了
            new QRCode(this.$refs.qrCodeDiv, {
                text: 'http://m.jqjq.net/jiqiao/75871.html',//后台返回的链接
                width: 200,
                height: 200,
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
            })
        },
        retrieve(url) {
            this.$router.push({ path: url }, () => { })
        }
    },

}
</script>
<style lang="scss">
.rightcontent .el-tabs__nav-wrap::after {
    height: 1px;
}

.rightcontent .el-tabs__item {
    height: 50px;
    padding: 0 60px;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #727171;
}

.rightcontent .el-tabs__item:hover {
    color: #C8291C;
}

.rightcontent .el-tabs__item.is-active {
    color: #C8291C;
}

.rightcontent .el-tabs__active-bar {
    background: #C8291C;
    /* width: 30px; */
}

.rightcontent .el-input-group__append {
    background: none;
}

.rightcontent .el-input__inner {
    height: 55px;
}
</style>
<style lang="scss" scoped>
.rightcontent {
    min-width: 500px;
}

.mainpadding2 {
    padding: 40px 25px;
}

.getcode {
    border-left: 1px solid rgba(0, 0, 0, 0.01);
    background-color: #fff;
}

.xyzc {
    font-size: 16px;
}




.notetext {
    color: #72728f;
    font-size: 16px;
    line-height: 26px;
}

.content {
    padding: 200px 0 0;
}

.loginleftimg {
    width: 400px;
    margin-top: 50px;
}

.rightcontent {
    background-color: #fff;
}
</style>